<template>
  <div class="questClass-box">
  		<el-row :gutter="10">
  		<el-col :span="2"><el-button @click="multiDel">删除</el-button></el-col>
  		<el-col :span="2"><el-button @click="add">新增</el-button></el-col>
  	</el-row>
    <Table
      :tableData="tableData"
      :inits="tableinits"
      canSelect
      @selection-change='_mixSelectionChange'
      :operation="operationinits">
      <template slot-scope="rowScope">
        <el-button @click="edit(rowScope)" type="text" size="small">编辑</el-button>
        <el-button @click="del(rowScope)" type="text" size="small">删除</el-button>
      </template>
    </Table>
    <!-- 分页器 S -->
    <el-row>
      <el-col>
        <el-pagination
          layout="prev, pager, next"
          :page-size="15"
          :current-page="pageNo"
          :total="total"
          @current-change="pageNoChange">
        </el-pagination>
      </el-col>
    </el-row>
    <!-- 分页器 E -->
  </div>
</template>

<script>
import Table from '@/components/Table'
import { quest_fmt_getQuestClass } from '@/util/dataFMT'
import multidel from '@/mixins/multidel'

export default {
  name: 'QuestClass',
  components: {
    Table
  },
  mixins: [multidel],
  mounted () {
    this.$API.getQuestClass(this.pageNo)
    .then(data => {
      this.total = data.total
      this.tableData = quest_fmt_getQuestClass(data.data)
    })
  },
  data () {
    return {
      total: 0,
      pageNo: 1,
      tableData: [],
      tableinits: [
        { label: '编号', width: '55', prop: 'id' },
        { label: '分类名称', prop: 'name' },
        { label: '更新时间', width: '300', prop: 'updateTime' },
        { label: '创建时间', width: '300', prop: 'createTime' }
      ],
      operationinits: { width: '100', label: '操作' }
    }
  },
  methods: {
    pageNoChange (pageNo) {
      this.$API.getQuestClass(pageNo)
      .then(data => {
        this.tableData = quest_fmt_getQuestClass(data.data)
      })
    },
    edit ({rowScope}) {
      this.$prompt('题目分类名称', '编辑', {
        confirmButtonText: '修改',
        inputPattern: /.{1,}/,
        inputErrorMessage: '名称不能为空',
        inputPlaceholder: `${rowScope.row.name}`
      }).then(({ value }) => {
        this.$API.updateQuestClass(rowScope.row.id, {name: value})
        .then(data => {
          this.pageNoChange(this.pageNo)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    del ({rowScope}) {
    	this.$confirm('确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
    	.then(() => {
	     		this.$API.delQuestClass(rowScope.row.id)
			    .then(data => {
			        this.tableData.splice(this.tableData.findIndex((el) => {
			          return el.id === rowScope.row.id
			        }), 1)
			      })
		     .catch(errmsg => {
		        this.$message({
	            type: 'error',
	            message: errmsg
		      	});
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
      	});

    },
    add () {
      this.$prompt('题目分类名称', '新增', {
        confirmButtonText: '保存',
        inputPattern: /.{1,}/,
        inputErrorMessage: '名称不能为空'
      }).then(({ value }) => {
        this.$API.addQuestClass(value)
        .then(data => {
          this.pageNoChange(1)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    multiDel () {
      this._mixMutiDel(`delQuestClass`, () => {
        this.$API.getQuestClass(1)
        .then(data => {
          this.total = data.total
          this.tableData = quest_fmt_getQuestClass(data.data)
        })
      })
    }
  }
}
</script>

<style>
 .questClass-box {
   text-align: left;
 }
</style>
